<template>
  <view class="container">


    <!-- 维修厂信息 -->
    <view class="shop-info">
      <text class="label">维修厂信息</text>
      <text class="content">{{ shopName }}</text>
      <text class="content">{{ shopAddress }}</text>
    </view>

    <!-- 用户信息 -->
    <view class="user-info">
      <text class="label">用户信息</text>
      <text class="content">{{ userName }}</text>
      <text class="content">{{ userPhone }}</text>
    </view>

    <!-- 预约按钮 -->
    <button class="appointment-button" @click="handleAppointment">立即预约</button>

    <!-- 车辆信息 -->
    <view class="car-info">
      <text class="label">车辆信息</text>
      <text class="content">{{ carInfo }}</text>
    </view>

    <!-- 服务产品列表 -->
    <view class="services">
      <text class="label">服务产品</text>
      <view class="service-item" v-for="(service, index) in services" :key="index">
        <text class="service-name">{{ service.name }}</text>
        <text class="service-price">¥{{ service.price }}</text>
      </view>
    </view>

    <!-- 优惠券 -->
    <view class="coupons">
      <text class="label">代金券/优惠券</text>
      <text class="content">{{ coupons }}</text>
    </view>

    <!-- 备注信息 -->
    <view class="remarks">
      <text class="label">备注信息</text>
      <textarea class="remark-input" placeholder="请输入备注信息" v-model="remark" />
    </view>

    <!-- 底部金额和提交按钮 -->
    <view class="footer">
      <text class="total">合计：¥{{ totalAmount }}</text>
      <button class="submit-button" @click="handleSubmit">提交订单</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 数据
const shopName = ref("伟业汽车维修厂(人民路店)");
const shopAddress = ref("山阳区人民中路32号");
const userName = ref("张三");
const userPhone = ref("18895039309");
const carInfo = ref("奔驰FWE4/豫A98FHJ");
const services = reactive([
  { name: "小保养套餐1（合成机油+机滤）", price: 199 },
  { name: "小保养套餐1（合成机油+机滤）", price: 199 },
  { name: "小保养套餐1（合成机油+机滤）", price: 199 },
]);
const coupons = ref("暂无");
const remark = ref("");
const totalAmount = ref(30.50);

// 方法
const handleAppointment = () => {
  uni.showToast({
    title: "预约成功",
    icon: "success",
  });
};

const handleSubmit = () => {
  uni.showToast({
    title: "订单提交成功",
    icon: "success",
  });
};
</script>

<style>
.container {
  padding: 20rpx;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.shop-info,
.user-info,
.car-info,
.services,
.coupons,
.remarks {
  margin-bottom: 20rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.content {
  font-size: 28rpx;
  color: #333;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.service-name {
  font-size: 28rpx;
  color: #333;
}

.service-price {
  font-size: 28rpx;
  color: #ff0000;
}

.appointment-button,
.submit-button {
  width: 100%;
  height: 80rpx;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 32rpx;
  border: none;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.remark-input {
  width: 100%;
  height: 120rpx;
  border: 1rpx solid #cccccc;
  border-radius: 10rpx;
  padding: 10rpx;
  box-sizing: border-box;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.total {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff0000;
}
</style>